<template>
  <div class="header">
    <div class="logo">
    <img src="@/assets/booklogo.png" alt="">
    </div>
    <h1 class="logo-name">果汁记事本</h1>

    <span class="writing">日日行，不怕千万里，时时学，不怕千万卷</span>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='css' scoped>
.logo { 
    display: inline-block;
    width: 80px;
    height: 80px;

}
.logo img {
    width: 100%;
    height: 100%;
}
.header {
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 15px;
    background-color: rgb(211, 223, 241);
}
.logo-name {
    margin-left: 30px;
    color: rgb(2, 152, 252);
}
.writing {
position: absolute;
left: 50%;
font-size: 20px;
}
</style>